<template>
    <view class="login-code-input">
        <view class="title-wrap">
            <view class="title">请输入验证码</view>
            <view class="tips">
                <text>验证码已发送至手机</text>
                <text class="mobile">{{ form.mobile }}</text>
            </view>
        </view>
        <view class="input">
            <u-code-input
                :bold="true"
                borderColor="#EEEEEE"
                @finish="inputFinish"
                color="#333333"
                :focus="true"
                :maxlength="4"
                mode="box"
                size="90rpx"
                space="62rpx"
                v-model="form.code"
            ></u-code-input>
        </view>
        <u--text
            align="center"
            @click="goBack"
            :color="disabledColor"
            :text="tips"
            type="primary"
        ></u--text>
        <setUserAvatar ref="loginSetUserInfoRef"></setUserAvatar>
    </view>
</template>

<script>
import setUserAvatar from '@/components/setUserAvatar'
export default {
  components: { setUserAvatar },
  data() {
    return {
      event: 'mobilelogin',
      form: {
        mobile: '',
        code: ''
      },
      tips: ''
    };
  },
  computed: {
    disabledColor() {
      if (this.$refs.uCode) {
        this.$refs.uCode.canGetCode;
      }
      return '#3c9cff';
    }
  },
  onLoad(option) {
    this.form.mobile = option.mobile;
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },
    codeChange(val) {
      this.tips = val;
    },
    login() {
      const tuid = uni.getStorageSync('tuid')
      this.$util.request({
        url: '/login/loginWithSms',
        data: {
          phone: this.form.mobile,
          code: this.form.code,
          tuid: tuid ? tuid : 0
        }
      }).then(res => {
        uni.setStorageSync('token', res.data.token);
        if (res.data.is_new === 1 || !res.data.avatar) {
          this.$refs.loginSetUserInfoRef.userInfoShow = true;
        } else {
          this.$util.message(res.message, 'success')
          setTimeout(function () {
            uni.reLaunch({
              url: '/pages/my/my'
            })
          }, 1000);
        }3167
      })
    },
    inputFinish(e) {
      setTimeout(() => {
        this.login()
      }, 500)
    }
  }
}
</script>
<style scoped>
@import './login-code-input.css';
</style>
